{% load static %}

{% block content %}
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <!-- 引入 Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">

    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">

    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>

<!-- 页面右上角导航栏 -->
<div class="navbar" id="navbar">
    <div class="btn-group">
        <a href="/main/home/" class="nav-link">首页</a>
        <a href="/main/about/" class="nav-link">简介</a>
        <a href="/main/works/" class="nav-link">作品</a>
        <a href="/main/board/" class="nav-link">留言板</a>
    </div>
</div>

<!-- 页面内容 -->
<div class="about-page">
    <div class="container">
        <!-- 动态文本部分 -->
        <div class="dynamic-text">
            <h1 class="dynamic-heading">如何介绍他，才足够全面...</h1>
        </div>

        {% comment %} <!-- 报纸式排版内容 -->
        <div class="newspaper-content">
            <div class="newspaper-item">
                <p>他讲述过森林的故事，也曾在纽约的街头沉默地展开报纸...</p>
                <img src="{% static 'images/1.jpg' %}" alt="图片1" class="newspaper-image">
            </div>
            <div class="newspaper-item">
                <p>也许仅此那一夜梦回，看龙华寺的桃花如雨落下...</p>
                <img src="{% static 'images/2.jpg' %}" alt="图片2" class="newspaper-image">
            </div>
            <div class="newspaper-item">
                <p>又或是跌落蓝天下的苹果园，惊醒在一场漫长的夏天...</p>
                <img src="{% static 'images/3.jpg' %}" alt="图片3" class="newspaper-image">
            </div>
            <div class="newspaper-item center">
                <p>他无数次路过伦敦的街头，写诗给她却知无法送达...</p>
                <img src="{% static 'images/4.jpg' %}" alt="图片4" class="newspaper-image center-image">
            </div>
            <div class="newspaper-item">
                <p>在圣山脚下回首，鲜红和暗色都化作铅笔的余灰...</p>
                <img src="{% static 'images/5.jpg' %}" alt="图片5" class="newspaper-image">
            </div>
            <div class="newspaper-item">
                <p>梦醒来的那一日，跨越时光的记忆也变得如此清晰。</p>
                <img src="{% static 'images/6.jpg' %}" alt="图片6" class="newspaper-image">
            </div>
        </div> {% endcomment %}

        <!-- 报纸式排版内容 -->
        <div class="newspaper-content">
            <div class="newspaper-item">
                <p>他讲述过森林的故事，也曾在纽约的街头沉默地展开报纸...</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/1.jpg' %}" alt="图片1" class="newspaper-image">
                </div>
            </div>
            <div class="newspaper-item">
                <p>也许仅此那一夜梦回，看龙华寺的桃花如雨落下...</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/2.jpg' %}" alt="图片2" class="newspaper-image">
                </div>
            </div>
            <div class="newspaper-item">
                <p>又或是跌落蓝天下的苹果园，惊醒在一场漫长的夏天...</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/3.jpg' %}" alt="图片3" class="newspaper-image">
                </div>
            </div>
            <div class="newspaper-item">
                <p>他无数次路过伦敦的街头，写诗给她却知无法送达...</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/4.jpg' %}" alt="图片3" class="newspaper-image">
                </div>
            </div>
            <div class="newspaper-item">
                <p>在圣山脚下回首，鲜红和暗色都化作铅笔的余灰...</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/5.jpg' %}" alt="图片3" class="newspaper-image">
                </div>
            </div>
            <div class="newspaper-item">
                <p>梦醒来的那一日，跨越时光的记忆也变得如此清晰。</p>
                <div class="newspaper-image-container">
                    <img src="{% static 'images/6.jpg' %}" alt="图片3" class="newspaper-image">
                </div>
            </div>
        </div>

        <!-- 新增动态文本内容 -->
        <div class="dynamic-text">
            <div class="dynamic-text">
                <h1>     </h1>
                <h1>     </h1>
                <h1 class="dynamic-mid">离开台上的一千个梦境，他也拥有一切自由...</h1>
            </div>
            <p class="dynamic-paragraph">他会调酒</p>
            <img src="{% static 'images/7.jpg' %}" alt="图片7" class="newspaper-image">
            <p class="dynamic-paragraph">经营着自己的沙龙</p>
            <img src="{% static 'images/8.jpg' %}" alt="图片8" class="newspaper-image">
            <p class="dynamic-paragraph">去各种地方旅行，凌晨看海，徒步雪山</p>
            <img src="{% static 'images/9.jpg' %}" alt="图片9" class="newspaper-image">
            <p class="dynamic-paragraph">体验各种各样的生活</p>
            <img src="{% static 'images/10.jpg' %}" alt="图片9" class="newspaper-image">
            <p class="dynamic-paragraph">...</p>
        </div>
        <div>
            <h1 class="dynamic-heading">所以要如何形容他呢?</h1>
            {% comment %} <p class="dynamic-paragraph">他永远浪漫鲜活。</p> {% endcomment %}
            <h1 class="dynamic-ending">                   他永远浪漫鲜活。</h1>
        </div>


    </div>
</div>

{% endblock %}
